<template>
  <m-page>
    <!-- 历史账单页 -->
    <m-header title="历史账单"></m-header>
    <div class="history_bill">
      <div class="g-top">
        <div class="u-icon"></div>
        <p>融易通信用卡尾号（1234）</p>
      </div>
      <div class="g-center">
        <ynet-button @click="selectDate" round>{{billDate}}</ynet-button>
      </div>
      <div class="g-bottom" v-for="item in data" :key="item.year">
        <p class="g-bottom-year">{{item.year}}</p>
        <ynet-cell-item v-for="element in item.list" :key="element.id" :title="element.mouth+'账单'" :brief="'账单日'+element.date" @click="gotoDetail(item.year,element.id)" arrow>
          <span slot="right">{{element.amount_fl}}<ynet-amount :value='element.amount' :precision='2'></ynet-amount></span>
        </ynet-cell-item>
      </div>
    </div>
  </m-page>
</template>

<script>
import { Amount } from "ynet-mobile"
import ynetButton from "@components/button/index";
import ynetCellItem from "@components/cell-item/index";
export default {
  components: {
    ynetButton,
    ynetCellItem,
    [Amount.name]:Amount
  },
  data() {
    return {
      billDate:'全部', // 选择账单时间 默认为全部
      data:[
        {
          year:'2020年',
          list:[
            { 
              id:1,
              mouth:'2020年01月',
              date:'02-22',
              amount_fl:'-￥',
              amount:1920
            },
            {
              id:2,
              mouth:'2020年01月',
              date:'01-22',
              amount_fl:'-￥',
              amount:1920
            },
          ]
        },
        {
          year:'2019年',
          list:[
            {
              id:1,
              mouth:'2019年12月',
              date:'12-22',
              amount_fl:'-￥',
              amount:8762
            },
            {
              id:2,
              mouth:'2019年11月',
              date:'11-22',
              amount_fl:'-￥',
              amount:4320
            },
             {
              id:3,
              mouth:'2019年10月',
              date:'10-22',
              amount_fl:'-￥',
              amount:8310
            },
            {
              id:4,
              mouth:'2019年09月',
              date:'09-22',
              amount_fl:'-￥',
              amount:6540
            },
          ]
        }
      ]
    };
  },
  methods: {
    selectDate() {
      app.api.showDatePicker({
        type: "3", // 控件类型 0:日期选择 1:时间选择  3:日期选择的选择年月两个选项 新加年月选项弹窗
        title: "请选择日期", // 标题
        minimumDate: "", // 最小选择日期
        maximumDate: "", // 最大选择日期
        dateFormat: "yyyy-MM", // 日期格式 默认 yyyy-MM-dd
        currentDate: "" // 当前选中日期 (当前type为3时 日期可能为空 如果不为空日期数据为yyyy-mm)
      }).then(res=>{
        console.log(res)
        this.billDate = res.currentDate
      });
    }
  },
  created() {},
  mounted() {},
  methods:{
     //页面跳转
    goto(item, params) {
      let url = `http://172.16.1.239:8080/rong_yi_tong_card/${item}`;
      window.location.href = url;
      // app.api.pushWindow( url ,params )
    },
    // 查看详情
    // 点击前往账单详情页
    gotoDetail(time,id){
      let detail = {}
      let params = {}
      for(let i =0;i<this.data.length;i++){
        if(time === this.data[i].year){
          detail = this.data[i].list
        }
      }
      for(let i=0;i<detail.length;i++){
        if(id === detail[i].id){
          params = detail[i]
        }
      }
      console.log(params)
      this.goto('bill_inquiry/bill_detail.html',params)
    }
  },
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

